<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: radial-gradient(white, black);
		}
		div {
			font-size: 8em;
			font-weight: bold;
			color: rgb(255, 255, 255);
			transform: rotate(-20deg) skew(20deg);/*先旋转再倾斜*/
			/*一层一层的叠加阴影，定义越多那么字体越高，越立体*/
			text-shadow: -1px 1px 0 rgb(161, 162, 167), -2px 2px 0 rgb(161, 162, 167), -3px 3px 0 rgb(161, 162, 167), -4px 4px 0 rgb(161, 162, 167), -5px 5px 0 rgb(161, 162, 167), -6px 6px 0 rgb(161, 162, 167);
		}
		/*真阴影，这是字体最下面的那层模糊的阴影*/
		div::after {
			content: 'LIFE OF PI';
			position: absolute;
			top: 6px;
			left: -6px;
			color: #000;
			filter: blur(15px);
			z-index: -1;
		}
	</style>
</head>
<body>
	<div>
		<p>LIFE OF PI</p>
	</div>
</body>
</html>
